<template>
  <div style=" background: #ffffff">
    <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div>
      <div class="user_box" id="list-1">
        <div class="user_bd">
          <div class="fl">
            <img src="../img/mob.jpg" />
          </div>
          <div class="fr" style="width:80%;">
            <input id="mobile" name="mobile" type="text" placeholder="请输入邮箱、会员名或手机号" v-model="phone"/>
          </div>
        </div>

        <div class="user_bd">
          <div class="fl">
            <img src="../img/lock.jpg" />
          </div>
          <div class="fr" style="padding-left: .3rem;">
            <input id="password" type="password" placeholder="请输入登录密码"  v-show="isok" v-model="psw"/>
            <input id="mpassword" type="text" placeholder="请输入密码" v-show="isok2" v-model="psw"/>
          </div>
          <div class="mm_ico" :class="{on:ison}" @click="isonck"></div>
          <!--添加“on”样式来改变密码框眼睛图标-->
        </div>

        <div class="user_dd">
          <div class="fl">
            <img src="../img/iocn-3.jpg" />
          </div>
          <div class="fr" style="padding-left: .3rem;">
            <input id="verifyimgcode" name type="text" placeholder="请输入验证码" />
          </div>
          <div class="mm_dco verifyimg" style="float:right;">
            <!-- <img src="/Account/verifyCode" style="float:right;" title="点击刷新" /> -->
            
            <app-yanzhengma :value.sync="validCode"></app-yanzhengma>
          </div>
        </div>

        <button class="dl_but" @click="logins">登 录</button>
        <!--输入密码后 添加“dl”样式来改变按钮颜色-->

        <div class="user_bd" style="border-bottom:none; height:30px; margin-top:-5%; ">
          <a class="zc" @click="reg">新用户注册</a>
          <a class="wj" href="/Account/getPwd">忘记密码？</a>
        </div>
        <!--<button class="zc_but">注册</button>-->
      </div>
    </div>
  </div>
</template>
<script>
import appYanzhengma from "../components/appyanzhengma";
export default {
    data(){
    return{
        ison:false,
        mima:"",
         isok:true,
         isok2:false,
         psw:"",
         phone:'',
         keep:true,
         validCode:"",
    }
    },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    isonck(){ //改变密码的眼睛以及背景文字
        this.ison=!this.ison;
        this.isok = !this.isok;
        this.isok2=!this.isok2
    },
    async login(phone,psw,keep) {//登录
      let { data } = await this.$axios.get(
        "http://localhost:5555/listbo/login",
        {
          params: { phone, psw, keep }
        }
      );
    //   console.log(data);
      if(data.type==1){  //登录成功与否提示信息
          //回上一页 如没有则首页
          this.$store.commit("login",{
            phone:this.phone,
            token:data.token
          })
          
          this.$router.push({ name: "home"})
      }else if(data.msg==undefined){
          alert(data)
      }else{
          alert(data.msg)
      }
    },
    logins(){
        this.login(this.phone,this.psw,this.keep)
        console.log(this.phone,this.psw);
        localStorage.setItem("user", this.phone);//存用户
        
    },
    reg(){
        this.$router.push({ name: "reg"})
    }
    
  },
  created(){
    //  this.phone = this.$route.query.name;
    //   window.console.log(this.$route.query) 
    //   if (this.$route.query.lenght!==undefined) { //从登录页过来，自动填充刚注册的手机号
    //       this.phone = this.$route.query
    //   }else{
    //       this.phone=""
    //   }
  },
  components: {
    appYanzhengma
  }
};
</script>
<style>
a {
    color: #000;
    text-decoration: none;
    outline: none;
}
.user_box {
  width: 100%;
  overflow: hidden;
  margin-top: 5%;
}
.user_bd {
    width: 80%;
    margin: 10px auto 0 auto;
    height: 45px;
    overflow: hidden;
    border-bottom: 1px solid #e1e1e1;
}
.user_bd .fl {
    float: left;
    margin-top: 0%;
   
}

.user_bd .fl img {
    width: 50%;
}
.user_bd .fr {
    width: 70%;
    float: left;
    height: 45px;
    overflow: hidden;
}
.user_bd .fr input {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    margin-top: 10px;
}
.user_bd .fr input {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    margin-top: 10px;
}
.user_bd .fr input {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    margin-top: 10px;
}
.user_bd .mm_ico {
    width: 20px;
    height: 12px;
    margin-right: 3%;
    float: right;
    margin-top: 17px;
    background: url(../img/eye1.png) no-repeat scroll 0 0;
    background-size: 100% 100%;
}
.user_bd .on {
    background: url(../img/eye2.png) no-repeat scroll 0 0;
    background-size: 100% 100%;
}
.user_dd {
    width: 80%;
    margin: 10px auto 0 auto;
    height: 45px;
    overflow: hidden;
    border-bottom: 1px solid #e1e1e1;
}
.user_dd .fl {
    float: left;
    margin-top: 0%;
}
.user_dd .fl img {
    width: 50%;
}
.user_dd .fr {
    width: 38%;
    float: left;
    height: 45px;
    overflow: hidden;
}
.user_dd .fr input {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    margin-top: 10px;
}
.user_box .dl_but {
    border-radius: .3rem;
    width: 80%;
    margin: 20px 10%;
    background: #94193f;
    color: #a94765;
    height: 35px;
    text-align: center;
    line-height: 35px;
    font-size: 16px;
}
input {
    font-family: "微软雅黑", Helvetica;
    border: none;
    background: none;
}
.zc {
    text-align: left;
    line-height: 30px;
    color: #bd315c;
    display: block;
    float: left;
    font-size: 14px;
}
.wj {
    text-align: right;
    line-height: 30px;
    color: #bd315c;
    font-size: 14px;
    display: block;
    float: right;
}
.user_dd .mm_dco {
    width: 3rem;
    height: 0.5rem;
    float: right;
    margin-top: 2.5%;
    /* background: url(../img/iocn-4.jpg) no-repeat scroll 0 0; */
    background-size: 100% 100%;
    font-size: 14px
}
</style>